<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-container>
    <el-header style="background-color: #0095d7">
      <h1 style="color: white;font-size: 22px">CoolShark商城后台管理系统
        <span style="float: right">欢迎{{user.nick}}回来! <a href="javascript:void(0)" @click="logout()">退出登录</a></span>
      </h1>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <!--:default-openeds设置默认打开的子菜单-->
        <el-menu @select="handleSelect" >
          <el-submenu index="1">
            <!--下面是设置子菜单的标题-->
            <template slot="title">
              <i class="el-icon-s-flag"> 分类管理</i>
            </template>
            <!--下面是两个菜单项-->
            <el-menu-item index="1-1">分类列表</el-menu-item>
            <el-menu-item index="1-2">添加分类</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <!--下面是设置子菜单的标题-->
            <template slot="title">
              <i class="el-icon-picture"> 轮播图管理</i>
            </template>
            <!--下面是两个菜单项-->
            <el-menu-item index="2-1">轮播图列表</el-menu-item>
            <el-menu-item index="2-2">添加轮播图</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <!--下面是设置子菜单的标题-->
            <template slot="title">
              <i class="el-icon-shopping-cart-2"> 商品管理</i>
            </template>
            <!--下面是两个菜单项-->
            <el-menu-item index="3-1">商品列表</el-menu-item>
            <el-menu-item index="3-2">添加商品</el-menu-item>
          </el-submenu>
        </el-menu>

      </el-aside>
      <el-main>
        <!--分类表格开始-->
        <el-table v-if="selectedIndex=='1-1'" :data="categoryArr" style="width: 100%">
          <!--prop=property属性 , 设置这一列显示的数据-->
          <el-table-column type="index" label="编号" width="280">
          </el-table-column>
          <el-table-column prop="name" label="名字" width="280">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--scope里面装着这一行所对应的对象信息,scope.$index得到下标
              scope.row得到这一行对应的对象-->
              <el-popconfirm
                      title="这是一段内容确定删除吗？"
                      @confirm="categoryDelete(scope.$index, scope.row)"
              >
                <el-button slot="reference" size="mini"  type="danger">删除</el-button>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
        <!--分类表格结束-->
        <!--轮播图表格开始-->
        <el-table v-if="selectedIndex=='2-1'" :data="bannerArr" style="width: 100%">
          <!--prop=property属性 , 设置这一列显示的数据-->
          <el-table-column type="index" label="编号" width="280">
          </el-table-column>
          <el-table-column label="轮播图" width="280">
            <template slot-scope="scope">
              <!--scope里面装着这一行所对应的对象信息,scope.$index得到下标
              scope.row得到这一行对应数组里面的图片路径-->
              <img :src="scope.row.url" width="100%" alt="">
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--scope里面装着这一行所对应的对象信息,scope.$index得到下标
              scope.row得到这一行对应的对象-->
              <el-popconfirm
                      title="这是一段内容确定删除吗？"
                      @confirm="bannerDelete(scope.$index, scope.row)"
              >
                <el-button slot="reference" size="mini"  type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!--轮播图表格结束-->
        <!--商品表格开始-->
        <el-table v-if="selectedIndex=='3-1'" :data="productArr" style="width: 100%">
          <!--prop=property属性 , 设置这一列显示的数据-->
          <el-table-column type="index" label="编号" width="100">
          </el-table-column>
          <el-table-column prop="title" label="商品标题" width="200">
          </el-table-column>
          <el-table-column prop="price" label="价格" width="100">
          </el-table-column>
          <el-table-column prop="oldPrice" label="原价" width="100">
          </el-table-column>
          <el-table-column prop="saleCount" label="销量" width="100">
          </el-table-column>
          <el-table-column label="商品图片" width="100">
            <template slot-scope="scope">
              <!--scope里面装着这一行所对应的对象信息,scope.$index得到下标
              scope.row得到这一行对应数组里面的图片路径-->
              <img :src="scope.row.url" width="100%" alt="">
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--scope里面装着这一行所对应的对象信息,scope.$index得到下标
              scope.row得到这一行对应的对象-->
              <el-popconfirm
                      title="这是一段内容确定删除吗？"
                      @confirm="productDelete(scope.$index, scope.row)"
              >
                <el-button slot="reference" size="mini"  type="danger">删除</el-button>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
        <!--商品表格结束-->
      </el-main>
    </el-container>
  </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {//在这里面定义变量
        selectedIndex:"1-1",
        categoryArr: [],
        bannerArr:[],
        productArr:[],
        user:{}
      }
    },
    methods:{
      logout(){
        if (confirm("您确认退出登录吗?")){
          axios.get("/logout").then(function () {
            location.href="/";//回到首页
          })
        }
      },
      productDelete(index,product){
        //发出删除请求
        axios.get("/product/delete?id="+product.id).then(function () {
          v.productArr.splice(index,1);
        })
      },
      bannerDelete(index,banner){
        //发出删除请求
        axios.get("/banner/delete?id="+banner.id).then(function () {
          v.bannerArr.splice(index,1);
        })
      },
      categoryDelete(index,category){
        //发出删除请求
        axios.get("/category/delete?id="+category.id).then(function () {
          //删除数组中的元素对象 页面会自动发生改变, 比直接刷新页面更节省流量
          //splice(数组下标,删除数量)
          v.categoryArr.splice(index,1);
        })
      },
      handleSelect(index){
        console.log(index);
        v.selectedIndex = index;
        if (index=="1-2"){
          let name = prompt("请输入分类名称");
          //判断出点击取消和 未输入内容的情况
          if (name==null||name.trim()==""){
            return;
          }
          //发出添加分类的请求
          axios.get("/category/insert?name="+name).then(function () {
            location.reload();
          })
          console.log("name="+name);
        }else if (index=="2-2"){
          location.href = "/insertBanner.html"
        }else if(index=="3-2"){
          location.href = "/insertProduct.html";
        }
      }
    },
    created:function () {
      //发请求获取当前登录的用户对象
      axios.get("/currentUser").then(function (response) {
        v.user=response.data;
        //判断是否登录
        if (v.user==""){
          alert("请先登录!")
          location.href="/login.html";
        }
      })

      axios.get("/category/select").then(function (response) {
        v.categoryArr = response.data;
      })
      axios.get("/banner/select").then(function (response) {
        v.bannerArr = response.data;
      })
      //请求所有的商品
      axios.get("/product/select/admin").then(function (response) {
        v.productArr = response.data;
      })
    }
  })
</script>
</html>